<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>axios手写</title>
</head>
<body>
	<button>发送</button>
	<button>取消</button>
</body>
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="module">
	import axios from "./index.js";
	const btns = document.querySelectorAll("button");
	let cancelFn = null;
	btns[0].onclick = function(){
		if(cancelFn) cancelFn();
		axios({
			url:"/info",
			// cancelToken的值是axios.CancelToken的实例
			// cancelToken拥有实例属性cancel，其值是一个Promise实例
			// cancelFn的值是一个函数，该函数的作用：
			//     一旦执行就会将cancelToken下的cancel状态设置为成功
			cancelToken:new axios.CancelToken(function(cancel){
				cancelFn = cancel;
			})
		}).then(value=>{
			console.log("then",value)
		}).catch(reason=>{
			console.log("catch",reason);
		})
	}
	btns[1].onclick = function(){
		// 将cancelToken.cancel的状态更改为成功，即会执行其成功回调。
		if(cancelFn) cancelFn();
	}
</script>
</html>